<template>
  <uni-popup ref="carlist" type="bottom" @maskClick="maskClick" :safeArea="false">
    <!-- <view class="box-con padding"
      :style="{paddingBottom:props.isPhonex? (props.uSource!='searchMenu'?'300rpx':'200rpx') : (props.uSource!='searchMenu'?'270rpx':'200rpx')}"> -->
    <view class="box-con padding">
      <view class="top-title flex justify-between">
        <view class="modalTitle pad_cl text-c6">我点的<text class="color9307">(6人)</text></view>
        <view class="text-sm"><text class="acon-shanchu margin-right-xs"></text><text class="text-c153">清空重点</text>
        </view>
      </view>
      <scroll-view class="scrollheight" :scroll-y="true">
        <view class="carul">
          <view class="carli flex justify-between align-center padding-right-xs margin-top-sm padding-left-sm"
            v-for="(item,index) in list" :key="index">
            <view class="left-car flex justify-between">
              <view  @click="showPop('editTechnRef')">
                <image class="img margin-right-sm" :src="item.imgSrc" mode=""></image>
                <view class="edit-car flex align-center justify-center margin-left-xs">
                  <text class="acon-bianji text-df text-c9"></text><text class="text-xs text-c9">修改</text>
                </view>
              </view>
              <view class="l-child">
                <view class="text-bold text-c3 text-lg" >{{item.name}}</view>
                <view class="text-c9 text-sm line-rigth margin-top-xs margin-bottom-xs">
                  <text class="textstyle" v-for="(citem,cindex) in item.sublist" :key="index" :class="{clor700:citem == '点名'}">{{citem}}</text>
                </view>
                <view class="servicebegins text-sm" v-if="item.time">{{item.time}}分钟后开始服务</view>
                <view class="text-sm clor56B" v-else><text class="acon-a-Frame10691 margin-right-xs"></text>{{item.timeslot}}</view>
              </view>
            </view>
            <view class="right-car flex flex-direction align-end ">
              <view class="clor6d text-xl text-right padding-right-sm margin-bottom-sm">￥{{item.pir}}</view>
              <view>
                <uni-number-box class="numbx priceCommon" :min="item.num" :max="10" :allowInput="true"
                  margin="0 -7rpx" />
              </view>
            </view>

            <!-- <view class="edit-car" @click="showPop('editTechnRef')">
              <text class="acon-bianji text-df text-c9"></text>
            </view> -->
          </view>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
  <replaceUnit ref="replaceUnitRef" :featList="morFeatList" :sevProList="sevProList" :shopSet="shopSet"></replaceUnit>
  
  <!-- 购物车修改 -->
  <editTechnView ref="editTechnRef"></editTechnView>
</template>
<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import editTechnView from "./editTechnician.vue" //点名
  
  import replaceUnit from "./replaceUnit.vue" //购物车修改
  const emit = defineEmits(["confirm", "maskClick"])
  const replaceUnitRef = ref(null)
  const editTechnRef = ref(null)
  const shopSet = ref({
    isDisplayRoomNo : '6',
    isDisplayTechnicianNo:'6',
    isSpecifyAllowed:'6',
    onlyShowMoxa:'6'
  })
  const sevProList = ref([
    {
      name:"足浴",
      mstatus:"20",
      gtin_sku:"ZY00001",
      goods_id:3,
      timeList:[
        {
          cwId:225,
          endPrice:99,
          minute:null,
          name:40,
          showList:false,
          specId:null,
          startPrice:99,
          totNums:0
        }
      ]
    },
    {
      name:"SPA",
      gtin_sku:"SPA0001",
      mstatus:"20",
      goods_id:2,
    },
    {
      name:"艾灸",
      mstatus:"20",
      gtin_sku:"AJ0001",
      goods_id:1,
    },
    {
      name:"按摩",
      mstatus:"20",
      gtin_sku:"AM00001",
      goods_id:4,
    }
  ])
  const morFeatList = ref([
    {
      dname :"不限",
      isShow:false,
      pid:"1084",
      slcId:991,
      title:"多媒体",
      list:[
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:52,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"无",
          nums:1,
          price:0
        },
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:51,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"有",
          nums:1,
          price:0
        },
        {
          defaultSelect:true,
          desc:null,
          edit:true,
          id:991,
          isSelect:true,
          max_price:null,
          min_price:null,
          name:"不限",
          nums:1,
          price:0
        }
      ]
    },
    {
      dname :"不限",
      isShow:false,
      pid:"999",
      slcId:991,
      title:"性别",
      list:[
        {
          defaultSelect:true,
          desc:null,
          edit:true,
          id:991,
          isSelect:true,
          max_price:null,
          min_price:null,
          name:"不限",
          nums:1,
          price:0
        },
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:7,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"女",
          nums:1,
          price:0
        }
      ]
    },
    {
      dname :"不限",
      isShow:false,
      pid:"997",
      slcId:991,
      title:"房间",
      list:[
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:12,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"VIP",
          nums:0,
          price:0
        },
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:11,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"普通",
          nums:0,
          price:0
        },
        {
          defaultSelect:true,
          desc:null,
          edit:true,
          id:991,
          isSelect:true,
          max_price:null,
          min_price:null,
          name:"不限",
          nums:0,
          price:0
        }
      ]
    },
    {
      dname :"不限",
      isShow:false,
      pid:"1085",
      slcId:991,
      title:"窗户",
      list:[
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:55,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"无窗",
          nums:1,
          price:0
        },
        {
          defaultSelect:false,
          desc:null,
          edit:true,
          id:54,
          isSelect:false,
          max_price:null,
          min_price:null,
          name:"有窗",
          nums:1,
          price:0
        },
        {
          defaultSelect:true,
          desc:null,
          edit:true,
          id:991,
          isSelect:true,
          max_price:null,
          min_price:null,
          name:"不限",
          nums:0,
          price:0
        }
      ]
    }
  ])
  
  const list = ref([
    {
      id: 0,
      name: '按摩',
      sublist: ['高级', '女', '805房'],
      time: '25',
      num: 0,
      pir: '388',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro4.png'
    },
    {
      id: 1,
      name: '洗脚',
      sublist: ['高级', '女', '805房'],
      timeslot: '14:00-15:00',
      num: 0,
      pir: '188',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro3.png'
    },
    {
      id: 2,
      name: '36号',
      sublist: ['高级', '女', '805房'],
      time: '25',
      num: 0,
      pir: '88',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro2.png'
    },
    {
      id: 3,
      name: '足浴',
      sublist: ['点名', '805房'],
      timeslot: '14:00-15:00',
      num: 0,
      pir: '488',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro1.png'
    },
    {
      id: 4,
      name: '按摩',
      sublist: ['高级', '女', '805房'],
      time: '25',
      num: 0,
      pir: '388',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro4.png'
    },
    {
      id: 5,
      name: '洗脚',
      sublist: ['高级', '女', '805房'],
      time: '25',
      num: 0,
      pir: '188',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro3.png'
    },
    {
      id: 6,
      name: '36号',
      sublist: ['高级', '女', '805房'],
      time: '25',
      num: 0,
      pir: '88',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro2.png'
    },
    {
      id: 7,
      name: '足浴',
      sublist: ['高级', '女', '805房'],
      time: '25',
      num: 0,
      pir: '488',
      imgSrc: 'https://cdn-static.yekjx.com/subscribe/images/sev_pro1.png'
    }
  ])
  const props = defineProps({
    couponDis: {
      type: Object,
      default: () => {
        return {
          money: 0
        };
      },
    },
    getVCoupons: Function || null,
    getCoupons: Function || null,
    vipDis: {
      type: Object,
      default: () => {
        return { money: 0 };
      },
    },
    isPhonex: {
      type: Boolean,
      default: false
    },
    uSource: {
      type: String,
      default: ''
    }
  });
  const carlist = ref(null)

  const open = () => {
    carlist.value.open()
  }

  const close = () => {
    carlist.value.close()
  }
  
  const showPop = (source : string) => {
    switch (source) {
      case 'replaceUnitRef':
        replaceUnitRef.value?.open()
        break;
      case 'editTechnRef':
        editTechnRef.value?.open()
        break;
      default:
        break;
    }
  }
  const hidePop = (source : string, type : any = '') => {
    switch (source) {
      case ' replaceUnitRef':
        replaceUnitRef.value?.close()
      case 'editTechnRef':
        editTechnRef.value?.close()
        break;
      default:
        break;
    }
  }
  
  const maskClick = (e : any) => {
    // cartStore.$reset()
    // console.log('car-maskClick',e);
    emit("maskClick")
  }

  defineExpose({ open, close })
</script>

<style lang="scss" scoped>
  .box-con {
    background-color: #fafafa;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 200rpx;
    flex-shrink: 0;
    min-height: 502rpx;
    max-height: 96vh;
    position: relative;

    .close-btn {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
    }

    .color9307 {
      color: #FF9307;
    }

    .text-c153 {
      color: rgba(153, 153, 153, 0.70);
    }

    .scrollheight {
      height: 700rpx;
    }

    .carul {
      .carli {
        position: relative;
        overflow: hidden;
        height: 160rpx;
        border-radius: 16rpx;
        background: #FFF;
      }

      .left-car {
        .img {
          width: 110rpx;
          height: 110rpx;
          border-radius: 12rpx;
        }
      }

      .line-rigth {
        .textstyle {
          position: relative;

          &:nth-last-child(n+2) {
            margin-right: 20rpx;
          }

          &:not(:last-child):before {
            content: '';
            position: absolute;
            right: -10rpx;
            width: 2rpx;
            height: 18rpx;
            background-color: #999;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      .servicebegins {
        color: #FF9700;
        border-radius: 4rpx;
        background: rgba(255, 151, 0, 0.10);
        padding: 5rpx 10rpx;
      }
    }
  }

  .edit-car {
    // width: 80rpx;
    // height: 80rpx;
    // border-radius: 50%;
    // background-color: rgba(230, 230, 230, 0.50);
    // position: absolute;
    // right: -30rpx;
    // top: -30rpx;
    // padding-top: 35rpx;
    // padding-left: 15rpx;
    width: 84rpx;
    height: 28rpx;
    background-color: rgba(230, 230, 230, 0.50);
    border-radius: 44rpx;
  }
  .clor700{
    color:#FF9700;
  }
  .clor6d {
    color: #FF6D6D;
  }
  .clor56B{
    color: #56BF7A;
  }
</style>